<template>
  <div class="message">
    <!-- 头部,我的资料 -->
    <van-nav-bar title="我的资料" left-arrow @click-left="$router.push('/my')">
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
    </van-nav-bar>

    <!-- 资料,昵称,性别,地区,个人简介 -->
    <van-cell
      title="头像"
      is-link
      :border="false"
      class="meteoo"
      @click="$router.push('/upload')"
    >
      <template #default>
        <div class="space"></div>
        <img :src="$store.state.userInfo.avatar" alt="" />
      </template>
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="$store.state.userInfo.nickname"
      :border="false"
      class="meteo"
      @click="$router.push('/nic')"
    >
    </van-cell>
    <van-cell
      title="性别"
      is-link
      :value="genderObj[$store.state.userInfo.gender]"
      :border="false"
      class="meteo"
      @click="genderDji"
    >
    </van-cell>
    <van-cell
      title="地区"
      is-link
      :value="$store.state.userInfo.area"
      :border="false"
      class="meteo"
      @click="ditu"
    >
    </van-cell>
    <van-cell
      title="个人简介"
      is-link
      :value="$store.state.userInfo.intro"
      :border="false"
      class="meteo"
      @click="$router.push('/jianj')"
    >
    </van-cell>
    <van-cell>
      <van-button plain type="primary" class="btnmain" @click="quit"
        >退出登录</van-button
      >
    </van-cell>

    <!-- 性别面板 -->

    <van-popup v-model="xingbShow" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        v-model="$store.state.userInfo.gender"
      />
    </van-popup>

    <!-- 地区,地图 -->
    <van-area
      title="标题"
      :area-list="areaList"
      :columns-num="2"
      v-if="isShow"
      @confirm="onConfirmm"
      @cancel="onCancell"
      value="360000"
    >
    </van-area>
  </div>
</template>

<script>
import { edit } from '@/api/api.js' // api
import { removeLocal } from '@/utils/local.js' // 删除token
import cityData from '@/utils/cityData.js' // 地图

export default {
  components: {},
  data () {
    return {
      isShow: false, // 地图的显示隐藏
      xingbShow: false, // 性别的弹框
      columns: ['未知', '男', '女'], // 性别的数据
      genderObj: {
        0: '未知',
        1: '男',
        2: '女'
      }, // 性别的对象
      areaList: {
        // 省市,在utils里面有专门的文件,利用导入的名称.值 获取
        province_list: cityData.province_list,
        city_list: cityData.city_list
      }
      // user: {
      //   nickname: this.$store.state.userInfo.nickname,
      //   area: this.$store.state.userInfo.area,
      //   intro: this.$store.state.userInfo.intro,
      //   gender: this.$store.state.userInfo.gender,
      //   avatar: this.$store.state.userInfo.avatar,
      //   position: this.$store.state.userInfo.position,
      // }
    }
  },
  methods: {
    // 地图确定: 导入utils里面的地图,定义一个变量areaList,对象的形式取值,地图就在页面上显示了,触发确定事件onConfirmm,发送请求服务器,给它传省的名称,提示信息,关闭弹窗
    async onConfirmm (value) {
      console.log(value[0].name)
      const main = value[0].name
      await edit({ area: main })
      this.$toast.success('用户信息更新成功')
      this.isShow = false
    },
    // 地图取消:隐藏将isShow改为false
    onCancell () {
      this.isShow = false
    },
    // 地图:显示将isShow改为true
    ditu () {
      this.isShow = true
    },

    // 退出登录: 提示是否退出,remove roken 跳转到登录页,removeLocal()不传参默认清除token,好用,记住
    quit () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '你确定要退出登录?'
        })
        .then(() => {
          removeLocal()
          this.$router.push('/login')
        })
        .catch(() => {
          this.$toast('取消')
        })
    },
    // 性别的确定:判断value,定义变量gender=0,1,2,赋值给$store,触发修改信息api,关闭弹框,出现问题页面显示的是数字,定义一个变量genderObj,0:未知,1:男,在dom取值渲染genderObj[$store.state.userInfo.gender]
    onConfirm (value) {
      let gender = -1
      if (value === '未知') {
        gender = 0
      } else if (value === '男') {
        gender = 1
      } else {
        gender = 2
      }
      this.$store.state.userInfo.gender = gender

      this.saveq()
      this.xingbShow = false
    },
    // 性别的取消:将false改为false隐藏
    onCancel () {
      this.xingbShow = false
    },
    // 性别的弹出框:将false改为true显示
    genderDji () {
      this.xingbShow = true
    },
    // api修改性别数据:发送请求到服务器,提示信息更新成功
    async saveq () {
      await edit({ gender: this.$store.state.userInfo.gender })
      this.$toast.success('用户信息更新成功')
    }
  }
  // created () {
  //   this.saveq()
  // }
}
</script>

<style lang="less" scoped>
.message {
  .van-cell__value {
    color: #9c9c9e;
  }
  .btnmain {
    width: 100%;
    margin-top: 15px;
    margin: 0 auto;
    display: inline-block;
    border-radius: 10px;
    border: 1px solid #9d9ea0;
    color: #e50d41;
  }
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    // vertical-align: middle;
  }
  .meteoo {
    line-height: 70px;
    height: 70px;
    vertical-align: middle;
  }
}
</style>
